/*
 * @Description: 学习用的插件
 * @Autor: lcz
 * @LastEditors: lcz
 * @LastEditTime: 2023-10-16 15:06:02
 */
/**
 * 执行顺序
 * 启动阶段: config-configResolve-options-configureServe-buildStart
 * 请求响应阶段: resolveId-load-transform == transformIndexHtml
 * 热更新阶段: handleHotUpdate
 * 关闭阶段:buildEnd-closeBundle
 * 改变插件的执行顺序可通过enforce
 */

export default function studyPugin() {
  let config = "";

  return {
    name: "vite-plugin-study",
    enforce: "pre",
    apply: "serve",

    // 读取vite.config.ts 后,拿到导出对象,然后执行config配置
    // config: () => ({
    //   alias: {
    //     react: require.resolve('react')
    //   }
    // }),

    // 最终config配置
    configResolved(_config) {
      config = _config;
    },

    // // 在其他钩子中可以访问到配置
    // transform(code, id) {
    //   console.log(config)
    // },

    //仅在开发阶段会被调用
    // configureServer(server) {
    //   // 姿势 1: 在 Vite 内置中间件之前执行
    //   server.middlewares.use((req, res, next) => {
    //     // 自定义请求处理逻辑
    //   })
    //   // 姿势 2: 在 Vite 内置中间件之后执行
    //   return () => {
    //     server.middlewares.use((req, res, next) => {
    //       // 自定义请求处理逻辑
    //     })
    //   }
    // },

    // 钩子用来灵活控制 HTML 的内容，你可以拿到原始的 html 内容后进行任意的转换, 也可以通过对象结构，添加某些标签
    // transformIndexHtml(html) {
    //   return html.replace(
    //     /<title>(.*?)</title>/,
    //     `<title>换了个标题</title>`
    //   )
    // },

    //服务区热更新
    // async handleHotUpdate(ctx) {
    //   // 需要热更的文件
    //   console.log(ctx.file)
    //   // 需要热更的模块，如一个 Vue 单文件会涉及多个模块
    //   console.log(ctx.modules)
    //   // 时间戳
    //   console.log(ctx.timestamp)
    //   // Vite Dev Server 实例
    //   console.log(ctx.server)
    //   // 读取最新的文件内容
    //   console.log(await read())
    //   // 自行处理 HMR 事件
    //   ctx.server.ws.send({
    //     type: 'custom',
    //     event: 'special-update',
    //     data: { a: 1 }
    //   })
    //   return []
    // },

    //运行的服务关闭后执行、如build 打包完成后,本地serve服务关闭后
    closeBundle() {
      console.log(config);
    }
  };
}
